import React, { useState } from 'react';
import { Card, Row, Col, Typography, Space, Tag, Divider, Alert, Button } from 'antd';
import { AudioOutlined, RobotOutlined, UserOutlined, SettingOutlined, SendOutlined } from '@ant-design/icons';
import AIChatWithAnimation from '../../compages/AIChatWithAnimation';
import SimpleModelViewer from '../../compages/SimpleModelViewer';

const { Title, Paragraph, Text } = Typography;

const VoiceChatDemo: React.FC = () => {
  const [currentAnimation, setCurrentAnimation] = useState('idle');

  const handleAnimationChange = (animation: string) => {
    setCurrentAnimation(animation);
  };

  return (
    <div style={{ padding: '24px', maxWidth: '1200px', margin: '0 auto' }}>
      <Title level={2} style={{ textAlign: 'center', marginBottom: '32px' }}>
        🎤 语音聊天功能演示
      </Title>

      <Row gutter={[24, 24]}>
        {/* 3D模型展示区域 */}
        <Col xs={24} lg={12}>
          <Card 
            title={
              <Space>
                <RobotOutlined style={{ color: '#1890ff' }} />
                <span>3D数字人模型</span>
                <Tag color={currentAnimation === 'idle' ? 'default' : 'processing'}>
                  {currentAnimation === 'idle' ? '待机' : currentAnimation}
                </Tag>
              </Space>
            }
            style={{ height: '600px' }}
          >
            <div style={{ height: '500px', position: 'relative' }}>
              <SimpleModelViewer 
                modelPath="/models/girl.glb"
                setAnimation={handleAnimationChange}
                currentAnimation={currentAnimation}
              />
            </div>
          </Card>
        </Col>

        {/* AI聊天区域 */}
        <Col xs={24} lg={12}>
          <AIChatWithAnimation 
            setAnimation={handleAnimationChange}
            lang="zh"
          />
        </Col>
      </Row>

      <Divider />

      {/* 功能特性介绍 */}
      <Row gutter={[24, 24]}>
        <Col span={24}>
          <Title level={3}>🎯 语音聊天功能特性</Title>
        </Col>
        
        <Col xs={24} md={8}>
          <Card title="🎤 语音识别" size="small">
            <Space direction="vertical" style={{ width: '100%' }}>
              <Text>• 支持中文语音识别</Text>
              <Text>• 实时语音转文字</Text>
              <Text>• 自动填入输入框</Text>
              <Text>• 错误提示和状态反馈</Text>
            </Space>
          </Card>
        </Col>

        <Col xs={24} md={8}>
          <Card title="🔊 语音合成" size="small">
            <Space direction="vertical" style={{ width: '100%' }}>
              <Text>• AI回复自动播放语音</Text>
              <Text>• 可调节语速、音调、音量</Text>
              <Text>• 支持语音播放控制</Text>
              <Text>• 与3D模型动画同步</Text>
            </Space>
          </Card>
        </Col>

        <Col xs={24} md={8}>
          <Card title="🤖 智能交互" size="small">
            <Space direction="vertical" style={{ width: '100%' }}>
              <Text>• 动作指令识别</Text>
              <Text>• 3D模型动画控制</Text>
              <Text>• 智能对话回复</Text>
              <Text>• 多语言支持</Text>
            </Space>
          </Card>
        </Col>
      </Row>

      <Divider />

      {/* 使用说明 */}
      <Row gutter={[24, 24]}>
        <Col span={24}>
          <Title level={3}>📖 使用说明</Title>
        </Col>

        <Col xs={24} md={12}>
          <Card title="🎤 语音输入操作" size="small">
            <Space direction="vertical" style={{ width: '100%' }}>
              <Text strong>1. 点击麦克风按钮</Text>
              <Text>• 按钮变为红色表示正在录音</Text>
              <Text>• 显示"正在听您说话..."状态</Text>
              
              <Text strong>2. 开始说话</Text>
              <Text>• 清晰发音，避免背景噪音</Text>
              <Text>• 支持中文语音识别</Text>
              
              <Text strong>3. 停止录音</Text>
              <Text>• 再次点击麦克风按钮停止</Text>
              <Text>• 或等待自动停止</Text>
              
              <Text strong>4. 确认发送</Text>
              <Text>• 识别结果自动填入输入框</Text>
              <Text>• 点击发送按钮或按回车键</Text>
            </Space>
          </Card>
        </Col>

        <Col xs={24} md={12}>
          <Card title="🎯 动作指令示例" size="small">
            <Space direction="vertical" style={{ width: '100%' }}>
              <Text strong>跳舞相关：</Text>
              <Text>• "跳舞"、"舞蹈"、"表演"、"展示"</Text>
              <Text>• "动起来"、"跳个舞"、"来跳舞"</Text>
              
              <Text strong>待机相关：</Text>
              <Text>• "停止"、"别动"、"安静"、"休息"</Text>
              <Text>• "待机"、"停下"、"不要动"</Text>
              
              <Text strong>情感表达：</Text>
              <Text>• "哭泣"、"哭"、"伤心"、"难过"</Text>
              <Text>• "笑"、"开心"、"高兴"</Text>
              
              <Text strong>特技动作：</Text>
              <Text>• "倒立"、"翻跟头"、"特技"、"杂技"</Text>
              <Text>• "翻转"、"点头"、"摇头"</Text>
            </Space>
          </Card>
        </Col>
      </Row>

      <Divider />

      {/* 技术实现 */}
      <Row gutter={[24, 24]}>
        <Col span={24}>
          <Title level={3}>⚙️ 技术实现</Title>
        </Col>

        <Col xs={24} md={12}>
          <Card title="🔧 核心技术" size="small">
            <Space direction="vertical" style={{ width: '100%' }}>
              <Text strong>Web Speech API</Text>
              <Text>• SpeechRecognition - 语音识别</Text>
              <Text>• SpeechSynthesis - 语音合成</Text>
              
              <Text strong>React Hooks</Text>
              <Text>• useState - 状态管理</Text>
              <Text>• useRef - 引用管理</Text>
              <Text>• useEffect - 生命周期</Text>
              
              <Text strong>TypeScript</Text>
              <Text>• 类型安全</Text>
              <Text>• 接口定义</Text>
              <Text>• 错误处理</Text>
            </Space>
          </Card>
        </Col>

        <Col xs={24} md={12}>
          <Card title="🎨 UI/UX 设计" size="small">
            <Space direction="vertical" style={{ width: '100%' }}>
              <Text strong>Ant Design</Text>
              <Text>• 组件库集成</Text>
              <Text>• 响应式设计</Text>
              <Text>• 主题适配</Text>
              
              <Text strong>动画效果</Text>
              <Text>• 录音状态动画</Text>
              <Text>• 语音播放指示</Text>
              <Text>• 消息滑入效果</Text>
              
              <Text strong>用户体验</Text>
              <Text>• 实时状态反馈</Text>
              <Text>• 错误提示</Text>
              <Text>• 操作引导</Text>
            </Space>
          </Card>
        </Col>
      </Row>

      <Divider />

      {/* 浏览器兼容性 */}
      <Alert
        message="浏览器兼容性提示"
        description={
          <div>
            <Text>语音识别功能需要现代浏览器支持：</Text>
            <br />
            <Text>• Chrome 25+ (推荐)</Text>
            <br />
            <Text>• Edge 79+</Text>
            <br />
            <Text>• Safari 14.1+</Text>
            <br />
            <Text>• Firefox 需要用户手动启用</Text>
            <br />
            <Text type="secondary">注意：需要HTTPS环境或localhost才能正常使用语音功能</Text>
          </div>
        }
        type="info"
        showIcon
        style={{ marginBottom: '24px' }}
      />

      {/* 快速开始 */}
      <Card title="🚀 快速开始" size="small">
        <Space direction="vertical" style={{ width: '100%' }}>
          <Text>1. 确保浏览器支持语音识别功能</Text>
          <Text>2. 允许网页访问麦克风权限</Text>
          <Text>3. 点击麦克风按钮开始语音输入</Text>
          <Text>4. 说出您的问题或指令</Text>
          <Text>5. 等待AI回复并观看3D模型动画</Text>
        </Space>
      </Card>
    </div>
  );
};

export default VoiceChatDemo; 